<template>
  <el-menu default-active="1"
    class="el-menu-vertical-demo"
    :class="[!isCollapse?'el-menu--collapse':'']"
    background-color="#393d49"
    text-color="#fff"
    active-text-color="#5FB878"
    :collapse="!isCollapse">
    <div v-for="(item, index) in menuList"
      :key="index">
      <el-menu-item v-if="item.sub.length <= 0"
        :index="item.menuId"
        @click="openTab(item)">
        <i class="ui-icon menu-icon"
          :class="item.icon"></i>
        <span slot="title">{{ item.title }}</span>
      </el-menu-item>
      <el-submenu v-else
        :index="item.menuId">
        <template slot="title">
          <i class="ui-icon menu-icon"
            :class="item.icon"></i>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="(subItem, subIndex) in item.sub"
            :key="subIndex"
            :index="subItem.menuId"
            @click="openTab(subItem)"
            v-show="subItem.itemShow">
            {{ subItem.title }}
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
    </div>
  </el-menu>
</template>

<script>
import meunConf from "../../router/meun";
import cookie from "js-cookie";
import { Menu, MenuItem, MenuItemGroup, submenu } from "element-ui";
import { mapGetters } from "vuex";
export default {
  name: "indexMenu",
  components: {
    [Menu.name]: Menu,
    [MenuItem.name]: MenuItem,
    [MenuItemGroup.name]: MenuItemGroup,
    [submenu.name]: submenu,
  },

  data() {
    return {
      meunConf: meunConf, // 全局配置
      menuList: [], // 复制一份菜单列表
      userInfo: cookie.get("userId"),
    };
  },
  computed: {
    ...mapGetters({
      isCollapse: "GetSidebar",
    }),
  },
  methods: {
    initializeMemu() {
      var menuList = this.$menuArray(this.meunConf.menu, this.$apis.menuChoose);
      this.menuList = JSON.parse(JSON.stringify(menuList));
    },
    // 初始化
    init() {
      var that = this;
      that.initializeMemu();
    },
    // 打开 页签
    openTab(item) {
      this.$tab.open(item);
    },
  },
  mounted() {
    var that = this;
    that.init();
  },
};
</script>

<style  scoped>
.el-menu {
  border: none;
  /* width: 200px; */
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.menu-box {
  background: #393d49;
}
.menu-icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
* >>> .el-menu-item-group__title {
  padding: 0;
}
</style>